<!--多张图片上传-->
<template>
  <div class="flex-main">
    <div class="upload__file_desc" style="margin-bottom: 12px">
      <slot name="top-desc" />
    </div>
    <viewer :images="fileUrls" class="multiple-image-upload-container">
      <SingleImageUpload
        v-if="fileList.length!==limit"
        v-model="fileUUID"
        class="image-item"
        :catalog="catalog"
        :size-limit="sizeLimit"
        :crop="crop"
        :width="width"
        style="border: 0;"
        desc=""
        :crop-ratio="cropRatio" />
      <div
        v-for="(img,index) in fileList"
        :key="index"
        class="image-item"
        :style="{width:(width * cropRatio)+'px',height:(width)+'px'}">
        <img
          :src="global.getFileView(img)"
          :style="{width:(width * cropRatio)+'px'}">
        <div class="tool-bar">
          <el-tooltip class="item" effect="dark" content="文件删除" placement="top">
            <svg-icon icon-class="btnRemove" class="color-danger" @click="removeFile(img)" />
          </el-tooltip>
        </div>
      </div>
    </viewer>
    <div class="upload__file_desc"><i v-if="desc" class="el-icon-warning-outline" />{{ desc }}</div>
  </div>

</template>

<script>

export default {
  components: { },
  props: {
    value: {
      type: String,
      required: false,
      default() {
        return ''
      }
    },
    catalog: {
      type: String,
      required: true
    },
    width: {
      type: Number,
      required: false,
      default: 128
    },
    limit: {
      type: Number,
      required: false,
      default: 10
    },
    sizeLimit: {
      type: Number,
      required: false,
      default: 2
    },
    crop: {
      type: Boolean,
      default: true
    },
    cropRatio: {
      type: Number,
      required: false,
      default: 1 / 1
    },
    desc: {
      type: String,
      required: false,
      default: `单张照片不能超过2M，最多只允许上传10张照片`
    }
  },
  data() {
    return {
      fileUUID: '',
      fileUrls: [],
      fileList: []

    }
  },
  computed: {},
  watch: {
    value: function(val) {
      this.analysisFile(val)
    },
    fileUUID: function(val) {
      if (val) {
        var temp = this.fileList
        temp.push(val)
        this.analysisFile(temp.join(','))
        this.$emit('input', temp.join(','))
        setTimeout(() => {
          this.fileUUID = ''
        }, 100)
      }
    }
  },
  created() {
    this.analysisFile(this.value)
  },
  methods: {
    analysisFile(val) {
      this.fileUrls = []
      this.fileList = []
      if (val) {
        val.split(',').forEach(item => {
          this.fileList.push(item)
          this.fileUrls.push(this.global.getFileView(item))
        })
      }
    },
    async removeFile(uuid) {
      try {
        this.$confirm('此操作将永久删除图片, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('fileResourcesRemove', uuid).then(response => {
            this.fileUUID = null
            this.msgSuccess('删除成功')
            var temp = this.fileList.filter(item => {
              return item !== uuid
            })
            this.analysisFile(temp.join(','))
            this.$emit('input', temp.join(','))
          }).catch(() => { this.fileUUID = null })
        }).catch((_) => {

        })
      } catch (_) {
        console.log()
      }
    }
  }
}
</script>
  <style rel="stylesheet/scss" lang="scss" scoped>

  .multiple-image-upload-container{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0px;
    .image-item{
      margin-right: 12px;
      cursor: pointer;
      border: 1px dashed #097aff;
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      margin-bottom: 12px;
      .el-image{
        width: 100%;
        height: 100%;
      }
      img{
        width: 100%;
        height: 100%;
      }
      .tool-bar{
        position: absolute;
        top: 0px;
        right: 0px;
        background: rgba(0, 0, 0, 0.0);
        width: 2.8em;
        height: 2.8em;
        text-align: center;
        line-height: 33px;
        display: none;
        .svg-icon{
          width: 1.6em !important;
          height: 1.6em !important;
          color: #fff;
          margin: 0 5px 3px;
        }
      }
    }
    .image-item:hover .tool-bar{
      display: block;
    }
  }
  .upload__file_desc{
    color: #A6A6A6;
    font-size: 12px;
    margin-top: 0px;
    i{
      margin-right: 5px;
    }
  }
  </style>

